<template>
    <div class="dischargeport">
        <div class="h20"><span>选择船名航次</span><span style="color:red;">(注：装货港为盐田(CNYTN)，船舶类型为驳船的，请先与客服联系确认再申请)</span></div>
        <Form ref="formInline" :model="searchData" :label-width="60" inline>
            <Row>
                <Col span="6">
                <FormItem label="船名">
                    <Input height="22px" v-model="searchData.shipName" placeholder=""></Input>
                </FormItem>
                </Col>
                <Col span="6">
                <FormItem label="航次">
                    <Input height="22px" v-model="searchData.voyageNo" placeholder=""></Input>
                </FormItem>
                </Col>
                <Col span="6">
                <FormItem label="码头">
                    <RemoteSearch
                        placeholder="请选择"
                        v-model="searchData.dockCode"
                        :list="dockList"
                        keywordFiled="dataCode"
                        valueField="dataCode"
                        :labelFieldList="['dataCode','dataName']"
                    >
                    </RemoteSearch>
                </FormItem>
                </Col>
                <Col span="6">
                <FormItem>
                    <Button type="primary" @click="getSeaList()">查询</Button>
                </FormItem>
                </Col>

            </Row>
        </Form>

        <el-table ref="" :data="this.seaList" border highlight-current-row max-height="180" @row-dblclick="dClick" class="table-list" >
            <!-- <el-table-column prop="shipName" label="船名"  ></el-table-column>
                            <el-table-column prop="voyageNo"  label="航次"  ></el-table-column>
                            <el-table-column prop="agency" label="船舶代理"></el-table-column>
                            <el-table-column prop="imo" label="IMO" ></el-table-column>
                            <el-table-column prop="dockName" label="码头"  ></el-table-column>
                            <el-table-column prop="dischargePort" label="卸货港"  ></el-table-column>
                            <el-table-column prop="shipType" label="船舶类型"  ></el-table-column>
                            <el-table-column prop="arrivalDate"  label="预抵时间"  ></el-table-column>-->
            <el-table-column label="" width="65">
                <template slot-scope="scope">
                    <Checkbox v-model="scope.row.checked" @on-change="handleSelectionChange(scope.row)"></Checkbox>
                    <!--<Radio v-model="checked" @change="handleSelectionChange(scope)">Radio</Radio>-->
                </template>
            </el-table-column>
            <el-table-column prop="voyageNo" label="航次号" ></el-table-column>
            <el-table-column prop="imo" label="IMO" width="100" ></el-table-column>
            <el-table-column prop="shipName" label="船名（英文）" width="150" ></el-table-column>
            <el-table-column prop="ciId" label="船代代码" ></el-table-column>
            <el-table-column prop="ciNameCh" label="船代中文名称" width="120" ></el-table-column>
            <el-table-column prop="ciNameEng" label="船代英文名称" width="120" ></el-table-column>
            <el-table-column prop="dockCode" label="码头代码" width="100" ></el-table-column>
            <el-table-column prop="arrivalDate" label="预计抵达时间" width="160" ></el-table-column>
            <el-table-column prop="cutOffDate" label="截关期" width="160" ></el-table-column>
            <el-table-column prop="customsCode" label="关区代码" ></el-table-column>
            <el-table-column prop="leaveDate" label="预计离港时间" width="160" ></el-table-column>
            <el-table-column prop="shipNameCh" label="中文船名" ></el-table-column>
            <el-table-column prop="shipper" label="承运人" ></el-table-column>
            <el-table-column prop="status" label="发布状态" >
                <template slot-scope="scope">
                    {{scope.row.status==0?'已发布':scope.row.status==1?'已取消':scope.row.status==2?'已修改':scope.row.status==3?' 已恢复 ':scope.row.status}}
                </template>
            </el-table-column>
            <el-table-column prop="dataPlatCode" label="船代平台代码" width="110" ></el-table-column>

        </el-table>
        <div class="content-footer">
            <Page
                @on-change="currentChange"
                @on-page-size-change="pageSizeChange"
                :page-size="searchData.pageSize"
                :current="searchData.pageNum"
                :total="total"
                :transfer="true"
                show-total
                show-sizer
                show-elevator
            />
        </div>
    </div>

</template>
<script>
import { getVessel } from '@/api/sea.js'
import { getBasicData } from '@/api/declare.js'
export default {
    name: 'OpenVessel',
    data () {
        return {
            total: 0,
            seaList: [],
            dockList: [],
            searchData: {
                dockCode: '',
                pageNum: 1,
                pageSize: 10,
                shipName: '',
                voyageNo: ''
            },
            mtList: [{ value: 'YICT', name: '盐田港' },
                { value: 'DC', name: '大铲湾码头' },
                { value: 'CCT', name: 'CCT码头' },
                { value: 'MCT', name: 'MCT码头' },
                { value: 'MW', name: '妈湾码头' },
                { value: 'SCT', name: 'SCT码头' },
                { value: 'SKP', name: '招港码头' }
            ]
        }
    },
    created () {
        // 海运
        this.getSeaList()
        this.getDockList()
    },
    methods: {
        handleSelectionChange (row) {
            // el-radio单选框,不需要这一步
            this.seaList.forEach(item => {
                // 排他,每次选择时把其他选项都清除
                if (item.voyageNo !== row.voyageNo) {
                    item.checked = false
                }
            })
            // 如果使用单选框,这里可以把当前选中的这一项先保存起来
            this.$emit('getV', row)
        },
        // 获取海运信息
        getSeaList () {
            getVessel(this.searchData).then(res => {
                console.log('sealist')
                console.log(res.data.data.list)
                this.seaList = res.data.data.list
                this.total = res.data.data.total
            }).catch(err => {
                // this.getSeaList()
            })
        },
        // 页码改变回调
        currentChange (v) {
            this.searchData.pageNum = v
            this.getSeaList()
        },
        // 每页条数改变回调
        pageSizeChange (v) {
            this.searchData.pageSize = v
            if (this.searchData.pageNum === 1) {
                this.getSeaList()
            }
        },
        dClick (row) {
            console.log(row)
            this.$emit('getValue', row)
        },
        getDockList () {
            var obj = {
                dataMainType: 'DOCK',
                pageNum: 1,
                pageSize: 99999
            }
            getBasicData(obj).then(res => {
                this.dockList = res.data.data.list
            })
        }

    }
}
</script>
<style lang="less"  scoped>
.dischargeport{
    .content-footer{
    margin-top: 10px;
    float:right;
    }

}
.h20{
    font-weight: bold;
    height:20px;
    line-height: 20px;
    color:#000;
    margin-bottom: 10px;
}
.red{
    color:red;
}

</style>
